<template>
  <div>
    <TopFilter :list="searchList" :cols="3" :labelWidth="'90'" @filterChange="changeHandle"> </TopFilter>
    <FilterTable
      ref="remindList"
      :fetchapi="fetchApi"
      :columns="columns"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="remindList => (this.remindList = remindList)"
      selectionType="single"
      :onRowSelectChange="clumns => (this.selectClumns = clumns)"
    >
      <!--操作按钮-->
      <template slot="controls">
        <el-button type="primary" @click="add()">新增</el-button>
      </template>
    </FilterTable>
    <!--新增页面-->
    <Drawer :visible.sync="addFilesVisible" :title="dialogTitle" :width="1000" :destroyOnClose="true">
      <addFiles :type="handleType" :rowData="formData" @returnAdd="returnAddData" />
    </Drawer>
    <!--明细页面-->
    <Drawer :visible.sync="viewFilesvisible" :title="dialogTitle" destroyOnClose :width="1000">
      <viewFilesvisible :careId="careId" :type="handleType" :rowData="formData" @detailClose="closeDetailHandler" />
    </Drawer>
  </div>
</template>
<script>
// 引入新增页面
import { dictionary } from '@/utils/dictMixin';
import addFiles from './addFiles.vue';
// 引入明细页面
import viewFilesvisible from './viewFilesvisible.vue';
import { getInfo } from '@/api/customerRepair/customerCare/maintenanceRemind';
export default {
  components: {
    addFiles,
    viewFilesvisible
  },
  mixins: [dictionary],
  data() {
    this.conf = { add: '新增', Care: '关怀' };
    return {
      searchList: this.createTopFilterList(),
      columns: this.createcolumns(),
      // 新增-抽屉开关
      addFilesVisible: false,
      fetchParams: {},
      fetchApi: getInfo,
      viewFilesvisible: false,
      dialogTitle: '',
      handleType: '',
      formData: {},
      careId: ''
    };
  },

  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '关怀名称',
          fieldName: 'careName'
        },
        {
          type: 'INPUT',
          label: '关怀ID',
          fieldName: 'careId',
          hidden: true
        },
        {
          type: 'INPUT',
          label: '关怀编码',
          fieldName: 'careCode'
        },
        {
          type: 'DATE',
          label: '关怀建立时间',
          fieldName: 'careDate',
          placeholder: '请选择',
          valueFormat: 'yyyy-MM-dd',
          initialValue: ''
        }
      ];
    },
    createcolumns() {
      return [
        {
          title: '操作',
          dataIndex: 'operation',
          width: 160,
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" disabled={props.row.state === 82211001 ? true : false} type="text" onClick={() => this.viewHandle(props.row)}>
                  关怀
                </el-button>
              </div>
            );
          }
        },
        {
          title: '关怀名称',
          dataIndex: 'careName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '关怀编码',
          dataIndex: 'careCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '关怀建立时间',
          dataIndex: 'careDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          width: 220,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '状态',
          dataIndex: 'careStatus',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{this.createDictText(props.row.careStatus, '7014')}</span>;
          }
        }
      ];
    },
    /** 新增方法 */
    add() {
      this.handleType = 'add'; // 新增
      this.showHandler();
    },
    /** 新增返回数据处理方法 */
    returnAddData(type) {
      this.addFilesVisible = false;
      if (type.type === 'refresh') {
        this.$notify({
          title: '提示信息',
          message: '操作成功',
          type: 'success'
        });
        this.fetchParams = Object.assign({}, this.fetchParams);
      }
    },
    showHandler() {
      this.dialogTitle = `新增自定义关怀`;
      this.addFilesVisible = true;
      // this.viewFilesvisible = true;
    },
    viewHandle(row) {
      this.formData = row;
      this.careId = row.careId;
      this.dialogTitle = `自定义明细`;
      this.viewFilesvisible = true;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    }
  }
};
</script>
